<template>
	<view class="recorder">
		<NavbarRight leftIconColor="#333333" bgColor="transparent" isBack
			:left="{ imageUrl: leftImageUrl, width: '48rpx' }" />
		<view class="background"></view>
		<view class="content">
			<ChooseVideo ref="chooseVideo" @on-list-change="videoChange">
				<template #addBtn>
					<VideoView :src="video.path" width="686" height="386" border-radius="16" v-if="video.path" />
					<image :src="cameraCover" class="camera-cover" v-else></image>
				</template>
			</ChooseVideo>
			<view class="head">
				<view class="hot-info">
					<view class="hot-title ellipsis-3">
						{{ info.title }}
					</view>
					<view class="author">
						<!-- <text>作者：</text> -->
						<text>{{ info.subtitle }}</text>
					</view>
				</view>
			</view>
			<view class="article-body">
				<rich-text :nodes="info.content"></rich-text>
			</view>

		</view>
		<view class="recorder-player">
			<CameraManager :duration="videoDuration" :videoUrl="video.path" @confirm="handleConfirm"
				@start="handleStart" @reset="handleReset"></CameraManager>
		</view>
	</view>
</template>

<script setup>
	import NavbarRight from "@/components/navbar-right/index.vue";
	import ChooseVideo from "@/components/upload/chooseVideo.vue";
	import VideoView from "@/components/video-view";
	import CameraManager from "./components/camera-manager.vue";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		ref,
		toRaw,
		reactive
	} from "vue";
	import useRecorderStore from "@/store/recorder.js";
	const recorderStore = useRecorderStore();
	const {
		saveVideoFile,
		removeVideoFile
	} = recorderStore; // actions

	import {
		getArticleInfo
	} from "@/api/article";

	const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
	const cameraCover = ref("/static/images/article/xiangji-cover@3x.png");
	const id = ref("");
	const info = ref({});
	const editReciteId = ref("");
	onLoad((options) => {
		if (options && options.id) {
			id.value = options.id;
			getDetail();
		}
		if (options && options.editReciteId) {
			editReciteId.value = options.editReciteId;
		}
	});
	onUnload(() => {
		removeVideoFile();
	});
	const videoDuration = computed(() => {
		return video?.value?.duration || 0;
	});
	const getDetail = async () => {
		try {
			let res = await getArticleInfo({
				id: id.value,
			});
			info.value = res.data;
			console.log(info.value);
		} catch (e) {
			console.log(e);
			//TODO handle the exception
		}
	};

	const video = ref({});

	const videoChange = (fileList) => {
		const lists = toRaw(fileList);
		console.log("videoChange===", lists);
		if (lists && lists[0]) {
			video.value = lists[0].file;
		}
	};

	const chooseVideo = ref(null);
	const handleConfirm = () => {
		saveVideoFile(video.value);
		uni.$on("clear-video", () => {
			handleReset();
		});
		uni.$u.route({
			url: "/pages/article/camera/player",
			params: {
				id: info.value.id,
				editReciteId: editReciteId.value,
			},
		});
	};
	const handleStart = () => {
		chooseVideo.value.selectFile();
	};
	const handleReset = () => {
		removeVideoFile();
		video.value = {};
		console.log("handleReset");
	};
</script>

<style lang="scss" scoped>
	.recorder {
		position: relative;
		height: 100%;
		background: #ffffff;
		display: flex;
		flex-direction: column;

		.background {
			width: 100%;
			height: 780rpx;
			top: 0;
			left: 0;
			position: absolute;
			background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
		}

		.camera-cover {
			width: 686rpx;
			height: 386rpx;
		}

		.content {
			// flex: 1;
			// width: 100%;
			height: 100%;
			overflow: auto;
			position: relative;
			z-index: 10;
			padding: 20rpx 32rpx;
			padding-bottom: 128rpx;


			.head {
				position: relative;
				z-index: 10;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 50rpx;
				// padding: 0 32rpx;

				.cover-image {
					width: 196rpx;
					height: 260rpx;
					border-radius: 20rpx;
					background: #f4f5f7;
					margin-bottom: 40rpx;
				}

				.hot-info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;
					padding-top: 20rpx;

					.hot-title {
						font-size: 44rpx;
						font-weight: bold;
						color: #1a1a1a;
						line-height: 58rpx;
					}

					.author {
						font-size: 28rpx;
						color: #939999;
						line-height: 28rpx;
						margin-top: 20rpx;
					}
				}
			}

			.article-body {
				font-size: 28rpx;
				line-height: 44rpx;
				color: #939999;
				// height: 176rpx;
				// overflow-y: auto;
			}


		}

		.recorder-player {
			position: relative;
			z-index: 10;
			padding: 60rpx 32rpx;
		}
	}
</style>